<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/plantillas/menuTemplate.xhtml">
	<ui:define name="content">
	 <div class="ui-grid ui-grid-responsive">
      <div class="ui-grid-row">
        <div class="ui-grid-col-1">1</div>
        <div class="ui-grid-col-3">
	    <p:panel header="Registrar Concepto" id="idPanel" styleClass="form">	    
	     <h:form>
	     <h:panelGrid columns="2">
	     <p:outputLabel value="Concepto: "/><p:inputText value="#{registroPagoConceptoBean.concepto.concepto}"></p:inputText>
	     <p:outputLabel value="Descripción: "/><p:inputText value="#{registroPagoConceptoBean.concepto.descripcion}"></p:inputText>	     
	     <p:outputLabel value="Monto: "/><p:spinner prefix="$" value="#{registroPagoConceptoBean.concepto.monto}"  stepFactor="1.0" />
	     <p:outputLabel value="Periodicidad: "/>
	     <p:selectOneMenu value="#{registroPagoConceptoBean.concepto.periodo.idElemento}">
	       <f:selectItems value="#{registroPagoConceptoBean.listaPeriodicidad}"></f:selectItems>
	     </p:selectOneMenu>
	     <p:outputLabel value="Proyecto: "/>
	     <p:selectOneMenu value="#{registroPagoConceptoBean.concepto.idUnidadh}">
	       <f:selectItems value="#{loginBean.listUnidadesH}"></f:selectItems>
	     </p:selectOneMenu>
	     <p:outputLabel value="Estatus: "/>
	     <p:selectOneMenu value="#{registroPagoConceptoBean.concepto.estatus.idElemento}">
	       <f:selectItems value="#{registroPagoConceptoBean.listaEstatus}"></f:selectItems>
	     </p:selectOneMenu>
	     
	     <p:outputLabel value="Fecha Inicio: "/>
	     <p:calendar navigator="true" value="#{registroPagoConceptoBean.concepto.fechAlta}"></p:calendar>
	     <p:commandButton value="Guardar" actionListener="#{registroPagoConceptoBean.registrarConcepto}" update=":idPanel,:idConceptos"></p:commandButton>
	     <p:commandButton value="Limpiar" actionListener="#{registroPagoConceptoBean.limpiarDatos}" update=":idPanel"></p:commandButton>
	     </h:panelGrid>	     
	     </h:form>
	    </p:panel>
	    </div>
	    <div class="ui-grid-col-8">	    
	      <p:panel styleClass="datosTable" header="Conceptos Registrados" id="idConceptos">
	       <h:form>
	        <h:panelGrid columns="3">
	        <p:outputLabel value="Unidad Habitacional"/>
	        <p:selectOneMenu value="#{operacionesConceptosBean.idUnidadH}">
	          <f:selectItems value="#{loginBean.listUnidadesH}"></f:selectItems>
	        </p:selectOneMenu>
	        <p:commandButton value="Consultar" actionListener="#{operacionesConceptosBean.consultarConceptos}" update="idTableConceptos"/>
	        </h:panelGrid>
	        <p:dataTable  rows="10" rowsPerPageTemplate="5,10,15,20"
	         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
	         cellSeparator="5" paginator="true" scrollable="true" scrollHeight="295" styleClass="datosTable" id="idTableConceptos"
	         var="concepto" value="#{operacionesConceptosBean.listConceptos}">
	         <p:column headerText="concepto">
	          <h:outputText id="idConcepto" value="#{concepto.concepto}"></h:outputText>	      
              <p:tooltip id="toolTipFocus" for="idConcepto" value="#{concepto.descripcion}" styleClass="form"/>	        
	         </p:column>
	         <p:column headerText="Fecha alta">
	          <h:outputText value="#{concepto.fechAlta}">
	            <f:convertDateTime pattern="dd/MM/YYYY"></f:convertDateTime>
	          </h:outputText>	        
	         </p:column>
	         <p:column headerText="Monto">
	          <h:outputText value="$#{concepto.monto}"/>
	         </p:column>
	         <p:column headerText="Periodicidad">
	         <h:outputText value="#{concepto.periodo.descripcion}"/>
	         </p:column>
	          <p:column headerText="Editar">
	          <p:commandLink value="Editar" actionListener="#{operacionesConceptosBean.leerConcepto(concepto)}" oncomplete="PF('diagEdit').show();" update=":idDiagEdit"></p:commandLink>
	         </p:column>
	          <p:column headerText="Desactivar">
	           <p:commandLink value="Desactivar"></p:commandLink>
	         </p:column>	        
	        </p:dataTable>	       
	       </h:form>
	      </p:panel>
	    </div>
	   </div>
	  </div>
	  
	  <p:dialog widgetVar="diagEdit" header="Editar" styleClass="form" id="idDiagEdit">
	   <p:panelGrid columns="2">
	     <p:outputLabel value="Concepto: "/>
	     <p:inputText value="#{operacionesConceptosBean.concepto.concepto}"/>
	     <p:outputLabel value="Descripcion: "/>
	     <p:inputTextarea value="#{operacionesConceptosBean.concepto.descripcion}"/>
	     <p:outputLabel value="Monto: "/>
	     <p:spinner prefix="$" value="#{operacionesConceptosBean.concepto.monto}"/>
	     <p:outputLabel value="Periodicidad: "/>
	     <p:selectOneMenu value="#{operacionesConceptosBean.concepto.periodo.idElemento}">	      
	      <f:selectItems value="#{registroPagoConceptoBean.listaPeriodicidad}"></f:selectItems>
	     </p:selectOneMenu>	     
	   </p:panelGrid>
	  </p:dialog>	 
	</ui:define>
</ui:composition>
</html>